<template>
  <div class="modal">
    <div
      class="reset-pw"
      :style="
        isStudent
          ? {}
          : {
              height: '300px',
            }
      "
    >
      <div class="modal-header">
        <i></i>
        <span>批量重置{{ isStudent ? '学生' : '老师' }}密码</span>
        <i class="el-icon-close" @click="$emit('close')"></i>
      </div>
      <div
        class="modal-body"
        :style="
          isStudent
            ? {}
            : {
                'align-items': 'center',
              }
        "
      >
        <div class="row">
          <span class="title">选择年级</span>
          <div class="content">
            <el-select v-model="gradeId">
              <el-option
                v-for="{ id, name } in gradeList"
                :key="id"
                :value="id"
                :label="name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="row" v-if="isStudent">
          <span class="title">选择班级</span>
          <div class="content">
            <el-checkbox
              style="line-height: 40px"
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <ul class="class-list">
              <li
                class="class-item"
                :class="{ checked: checkClassIdLisst.includes(F_class_id) }"
                v-for="{ F_class_id, F_class_name } in classList"
                :key="F_class_id"
                @click="changeCheckList(F_class_id)"
              >
                {{ F_class_name }}
              </li>
            </ul>
          </div>
        </div>
        <div class="row">
          <span class="title">新密码</span>
          <div class="content">
            <el-input v-model="password" maxlength="10" clearable> </el-input>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="cancel-btn btn" @click="$emit('close')">取消</div>
        <div class="confirm-btn btn" @click="confirm">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResetPassword',
  props: {
    isStudent: {
      type: Boolean,
      default: false
    },
    schoolId: {
      type: [Number, String],
      required: false,
      default: null
    },
    gradeAndClass: {
      type: [Object, Array],
      required: false,
      default: () => ({})
    },
  },
  data() {
    return {
      gradeList: [],
      gradeId: 0,
      classList: [],
      isIndeterminate: false,
      checkAll: false,
      checkClassIdLisst: [],
      password: '',
    };
  },

  mounted() {
    // 确保 gradeAndClass 是对象，如果是数组则转换为空对象
    const gradeData = Array.isArray(this.gradeAndClass) ? {} : (this.gradeAndClass || {});
    this.gradeList = Object.keys(gradeData).map((id) => ({
      id: +id,
      name: this.$maps.gradeList.find((e) => e.id === +id)?.name || '',
    }));
    if(!this.isStudent) {
      this.gradeList.push({ id: -1, name: '其他' })
    }
  },
  watch: {
    gradeList(v) {
      this.gradeId = this.gradeList[0].id;
    },
    gradeId(v) {
      if (this.isStudent) {
        // 确保 gradeAndClass 是对象，如果是数组则转换为空对象
        const gradeData = Array.isArray(this.gradeAndClass) ? {} : (this.gradeAndClass || {});
        this.classList = gradeData[this.gradeId] || [];
      }
      this.checkClassIdLisst = [];
      this.password = '';
      this.isIndeterminate = false;
    },
    checkClassIdLisst(v) {
      const count = v.length;
      this.isIndeterminate = count > 0 && count < this.classList.length;
      this.checkAll = count === this.classList.length;
    },
  },
  methods: {
    handleCheckAllChange(val) {
      this.isIndeterminate = false;
      this.checkClassIdLisst = val
        ? this.classList.map((e) => e.F_class_id)
        : [];
    },
    changeCheckList(id) {
      if (!this.checkClassIdLisst.includes(id)) {
        this.checkClassIdLisst.push(id);
      } else {
        const index = this.checkClassIdLisst.indexOf(id);
        this.checkClassIdLisst.splice(index, 1);
      }
    },
    async confirm() {
      const api = this.isStudent
        ? this.$api.editStudentPW
        : this.$api.editTeacherPW;
      const params = this.isStudent
        ? {
            F_class_ids: this.checkClassIdLisst.join(),
            F_password: this.password,
          }
        : {
            F_school_id: this.schoolId,
            F_grade: this.gradeId,
            F_password: this.password,
          };
      const formData = new FormData();
      for (let [k, v] of Object.entries(params)) {
        formData.append(k, v);
      }
      const { F_responseNo, F_responseMsg } = await api(formData);
      if (F_responseNo === 10000) {
        this.$toast(`批量重置${this.isStudent ? '学生' : '老师'}密码成功`);
        this.$emit('close');
      } else {
        this.$toast(
          `批量重置${this.isStudent ? '学生' : '老师'}密码失败:${F_responseMsg}`
        );
      }
    },
  },
};
</script>

<style lang="less" scoped>
.reset-pw {
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 500px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 16px;
  color: #666;
  border-radius: 6px;
  background-color: #fff;

  .modal-header {
    padding: 0 20px;
    height: 45px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    i {
      cursor: pointer;
    }
  }
  .modal-body {
    box-sizing: border-box;
    padding: 20px 40px;
    flex: 1;
    text-align: left;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    .row {
      display: flex;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
      .title {
        flex-shrink: 0;
        width: 80px;
        line-height: 40px;
      }

      .class-list {
        display: flex;
        flex-wrap: wrap;
        .class-item {
          display: inline-block;
          height: 33px;
          line-height: 33px;
          padding: 0 10px;
          margin: 0 14px 8px 0;
          font-size: 14px;
          color: #808080;
          border: 1px solid #e7e2e2;
          border-radius: 3px;
          user-select: none;
          cursor: pointer;
          &.checked {
            background-color: #009cff;
            color: #fff;
          }
        }
      }
    }
  }

  .modal-footer {
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 80px;
      height: 34px;
      line-height: 34px;
    }
    .cancel-btn {
      margin-right: 20px;
      background-color: #fff;
      border: solid 2px #f5f5f5;
      color: #b3b3b3;
    }
    .confirm-btn {
      background-color: #009cff;
      color: #fff;
    }
  }
}
</style>
